<script setup lang="ts">
import { ReNormalCountTo } from "@/components/ReCountTo";
import { LineChart, RoundChart } from "./";
import type { PropType } from "vue";
import { useDark } from "@pureadmin/utils";

const props = defineProps({
  title: {
    type: String
  },
  bgColor: {
    type: String,
    default: "#effaff"
  },
  color: {
    type: String,
    default: "#41b6ff"
  },
  icon: {
    type: String
  },
  count: {
    type: Number
  },
  percent: {
    type: String
  },
  lineData: {
    type: Array as PropType<Array<number>>
  }
});

const { isDark } = useDark();
</script>

<template>
  <el-card class="line-card" shadow="never">
    <div class="flex justify-between">
      <span class="text-md font-medium">
        {{ props.title }}
      </span>
      <div
        class="w-8 h-8 flex justify-center items-center rounded-md"
        :style="{
          backgroundColor: isDark ? 'transparent' : props.bgColor
        }"
      >
        <IconifyIconOnline :icon="props.icon" :color="props.color" width="18" />
      </div>
    </div>
    <div class="flex justify-between items-start mt-3">
      <div class="w-1/2">
        <ReNormalCountTo
          :fontSize="'1.6em'"
          :startVal="100"
          :endVal="props.count"
        />
        <p v-if="props.percent.includes('-')" class="font-medium text-red-500">
          {{ props.percent }}
        </p>
        <p v-else class="font-medium text-green-500">
          {{ props.percent }}
        </p>
      </div>
      <LineChart
        v-if="props.lineData.length > 1"
        class="!w-1/2"
        :color="props.color"
        :data="props.lineData"
      />
      <RoundChart v-else class="!w-1/2" />
    </div>
  </el-card>
</template>
